<template>
    <div class="jianzhan-content">
        <div class="search-content">
            <el-select v-model="monthId"
                       filterable
                       clearable
                       class="select"
                       @change="monthChange"
                       placeholder="选择月份">
                <el-option
                        v-for="item in monthList"
                        :key="item.id"
                        :label="item.monthTime"
                        :value="item.id">
                </el-option>
            </el-select>
            <div class="table-content">
                <el-table
                        :data="monthReport"
                        empty-text="请选择月份"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            type="expand"
                    >
                        <template slot-scope="scope">
                            <el-calendar v-model="month">
                                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                                <template
                                        slot="dateCell"
                                        slot-scope="{date, data}"
                                >
                                    {{data.day}}
                                    <div style="color: #409eff">On Time
                                        :{{getDay(data.day,scope.row.clockRecordList)[1]}}
                                    </div>
                                    <div style="color: #409eff">Off Time
                                        :{{getDay(data.day,scope.row.clockRecordList)[0]}}
                                    </div>
                                    <div>{{getDay(data.day,scope.row.clockRecordList)[2]}}</div>
                                </template>
                            </el-calendar>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="employeeName"
                            label="姓名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="employeeId"
                            label="员工ID"
                    >
                    </el-table-column>
                    <el-table-column
                            label="应到"
                    >
                        <template slot-scope="scope">
                            {{scope.row.clockRecordList.length}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="实到"
                    >
                        <template slot-scope="scope">
                            {{scope.row.clockRecordList.filter(item=> item.checkStatusDes === 'ON').length}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import {getReportMonth, getMonthReport} from "../../api/hrReport";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "month-report",
        data() {
            return {
                monthId: '', // 选择的月份
                month: '',
                monthList: [], // 月份列表
                monthReport: [], // 月报内容
            }
        },
        created() {
            this._getMonth()
        },
        methods: {
            getDay(day, record) {
                const target = record.find(item => {
                    let curDay;
                    if (item.day < 10) {
                        curDay = this.month + '-0' + item.day
                        return curDay === day
                    } else {
                        curDay = this.month + '-' + item.day
                        return curDay === day
                    }
                })
                if (target) {
                    return [target.offTime, target.onTime, target.checkStatusDes]
                } else {
                    return ['', '', '']
                }
            },
            async monthChange(monthId) {
                if (monthId) {
                    const {status, data} = await getMonthReport(monthId)
                    if (status === ERROR_OK) {
                        this.monthReport = data
                        // this.month = '2020-06'
                        this.month = this.monthList.find(item => item.id === monthId).monthTime
                    }
                }
            },
            async _getMonth() {
                const {status, data} = await getReportMonth(1)
                if (status === ERROR_OK) {
                    this.monthList = data;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .select {
        float: left;
        margin-bottom: 10px;
    }
</style>